<template>
    <z-paging ref="paging" v-model="balanceLogsList" @query="queryList">
        <u-sticky>
            <view class="heqader_box">
                <hedsty :headCentext="'我的账单'"></hedsty>
                <view class="tabs_box">
                    <view class="dange_xuanze_tab_vbox" :class="tabsId == item.id ? 'dange_xuanze_tab_vbox1' : ''"
                        v-for="(item, index) in tabsList" :key="index" @click="tabsBtn(item)">{{ item.text }}
                    </view>
                </view>
            </view>
        </u-sticky>
        <view class="content_box" style="background-image: url('https://morgan.dingxians.cn/static/flow/4.png');" v-for="(item, index) in balanceLogsList"
            :key="index">
            <view class="one_box">{{ item.remark }}</view>
            <view class="two_box">{{ item.created_at }}</view>
            <view class="thr_box">{{ item.amount }}元素</view>
        </view>
    </z-paging>
</template>
<script>
import hedsty from '../../components/hedsty.vue'
export default {
    components: {
        hedsty
    },
    data() {
        return {
            tabsList: [
                {
                    id: '',
                    text: '全部',
                }, {
                    id: '1',
                    text: '收入',
                }, {
                    id: '2',
                    text: '花费',
                },
            ],
            tabsId: '',
            balanceLogsList:[]
        }
    },
    onLoad() {

    },
    onShow() {

    },
    methods: {
        tabsBtn(item) {
            this.tabsId = item.id
			this.$refs.paging.reload()
        },
		queryList(pageNo, pageSize) {
			let data = {
				mode: this.tabsId,
				page: pageNo,
				limit: pageSize
			}
			this.$Request.get(this.$api.user.balanceLogs, data).then(res => {
				if (res.code == 200) {
					this.$refs.paging.complete(res.data.data)
				}
			})
		},
    }
}
</script>
<style lang="scss" scoped>
.heqader_box {
    width: 750rpx;
    height: 447rpx;

    .tabs_box {
        width: 100%;
        height: 50rpx;
        box-sizing: border-box;
        padding-left: 30rpx;
        display: flex;
        justify-content: flex-start;
        margin-top: 32rpx;

        .dange_xuanze_tab_vbox {
            padding: 0 28rpx;
            height: 50rpx;
            text-align: center;
            line-height: 50rpx;
            margin-right: 30rpx;
            background: rgba(255, 255, 255, .5);
            border-radius: 25rpx;
            color: #ccc;
            font-size: 28rpx;

            &.dange_xuanze_tab_vbox1 {
                color: #FF4545;
                background: #501414;

            }
        }


    }
}

.content_box {
    width: 690rpx;
    height: 138rpx;
    margin: auto;
    background-size: 100% 100%;
    margin-top: -128rpx;
    box-sizing: border-box;
    padding: 29rpx 20rpx;
    position: relative;
    margin-bottom: 178rpx;

    .one_box {
        height: 27rpx;
        font-family: PingFang SC;
        font-weight: bold;
        font-size: 28rpx;
        color: #FFFFFF;
        line-height: 27rpx;
        margin-bottom: 23rpx;
    }

    .two_box {
        height: 20rpx;
        font-family: PingFang SC;
        font-weight: 500;
        font-size: 26rpx;
        color: #FFFFFF;
        line-height: 39rpx;
        opacity: 0.5;
    }

    .thr_box {
        height: 26rpx;
        font-family: PingFang SC;
        font-weight: bold;
        font-size: 28rpx;
        color: #FFEDD7;
        line-height: 26rpx;
        position: absolute;
        top: 0;
        bottom: 0;
        right: 32rpx;
        margin: auto;
    }
}
</style>